<template>
  <div>
    <LoadingGroup :pending="pending" :error="error" :is-empty="rows.length === 0">
      <div class="p-3">
        <PostList
          v-for="(item, index) in rows"
          :key="index"
          :item="item"
          @delete="handleDeleteItem"
        />
      </div>

      <div class="flex justify-center items-center mt-5 pb-10">
        <n-pagination
          size="large"
          :page="page"
          :item-count="total"
          :page-size="limit"
          :on-update:page="handlePageChange"
        />
      </div>
    </LoadingGroup>
  </div>
</template>

<script setup>
// 引入CompositionAPI
import { ref, computed, watch } from "vue";

// naive-ui
import { NPagination } from "naive-ui";

// 路由实例
const route = useRoute();

// 获取类型
const type = ref(route.query.tab || "course");

// 导航栏标题
useHead({ title: "考试记录" });

// 导航栏列表
const tabs = [
  {
    label: "课堂",
    value: "course",
  },
  {
    label: "专栏",
    value: "column",
  },
];

// 点击导航栏事件
const handleClick = (t) => {
  navigateTo({
    params: {
      ...route.params,
      page: 1,
    },
    query: {
      ...route.query,
      tab: t,
    },
  });
};

const {
  page,
  limit,
  total,
  rows,
  handlePageChange,
  pending,
  error,
  refresh,
} = await usePage(({ page }) => useMypostListApi(page));

const handleDeleteItem = async ({ id, success, fail }) => {
  const { error } = await useDeletePostApi(id, { success, fail });
  if (error.value) {
    fail();
  } else {
    success();
    refresh();
  }
};
</script>
